<template>
  <div class="echarts-outer-wrapper flex-cloumn width-620">
    <Title
      title="税务登记(分注册类型)"
      time="2"
      timePosition="left"
      dw="单位：户"
    ></Title>
    <div class="echart-tab-wrapper">
      <div class="tabs">
        <div
          class="tab-item"
          :class="{ select: tabIndex === index }"
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div ref="echart" class="flex1"></div>
  </div>
</template>
<script>
const KeyValue = ["yxList", "xbList"];
const color2 = [
  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
    {
      offset: 0,
      color: "RGBA(0, 56, 219, 1)",
    },
    {
      offset: 1,
      color: "RGBA(0, 168, 255, 1)",
    },
  ]),
  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
    {
      offset: 0,
      color: "RGBA(185, 121, 0, 1)",
    },
    {
      offset: 1,
      color: "RGBA(207, 206, 0, 1)",
    },
  ]),
  new echarts.graphic.LinearGradient(1, 1, 1, 0, [
    {
      offset: 0,
      color: "RGBA(0, 205, 115, 1)",
    },
    {
      offset: 1,
      color: "RGBA(0, 227, 192, 1)",
    },
  ]),
];
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null,
      tabList: ["有效", "新办"],
      tabIndex: 0,
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echart);
    this.ajax({
      url: "/dpzsDjcxService/swdjFzclxQuery",
      method: "post",
      data: {
        param: {
          swjg: this.$route.query.qx_swjg_dm,
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      this.changeTab(this.tabIndex);
    });
  },
  methods: {
    changeTab(index) {
      this.myChart.clear();
      this.tabIndex = index;
      let allData = {
        xdata: [],
        data: [],
      };
      let currentData = this.EchartData[KeyValue[this.tabIndex]];
      let xdata = [];
      let zchdata = {
        name: "正常户",
        data: [],
      }; // 正常
      let fzchdata = {
        name: "非正常户",
        data: [],
      }; // 非正常
      let qshdata = {
        name: "清算户",
        data: [],
      }; // 清算
      let zhcdata = {
        name: "总户数",
        data: [],
      }; // 总户数
      for (let item of currentData) {
        xdata.push(item.zclx);
        if (item.zch >= 0) zchdata.data.push(item.zch);
        if (item.fzch >= 0) fzchdata.data.push(item.fzch);
        if (item.qsh >= 0) qshdata.data.push(item.qsh);
        if (item.zhc >= 0) zhcdata.data.push(item.zhc);
      }
      allData.xdata = xdata;
      if (zchdata.data.length !== 0) {
        allData.data.push(zchdata);
      }
      if (fzchdata.data.length !== 0) {
        allData.data.push(fzchdata);
      }
      if (qshdata.data.length !== 0) {
        allData.data.push(qshdata);
      }
      if (zhcdata.data.length !== 0) {
        allData.data.push(zhcdata);
      }
      this.init(allData);
    },
    init(allData) {
      let yLabel = allData.xdata;
      let legendData = allData.data.map((item) => {
        return item.name;
      });
      legendData = legendData.filter((item) => {
        return item !== "总户数";
      });
      this.legend = legendData;
      let series = allData.data.map((item, index) => {
        if (item.name === "清算户") {
          item.data = item.data.map((val) => {
            return {
              value: val,
              itemStyle: {
                barBorderRadius: [0, 8, 8, 0],
              },
            };
          });
        }
        return {
          name: item.name,
          type: "bar",
          zlevel: 1,
          stack: "total",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(3, 6, 79, 0.52)",
            barBorderRadius: [0, 8, 8, 0],
            opacity: 0.52,
          },
          itemStyle: {
            normal: {
              barBorderRadius: [0, 0, 0, 0],
              // 颜色渐变
              color: color2[index],
              shadowBlur: 0,
              shadowColor: "rgba(87,220,222,0.7)",
            },
          },
          barWidth: 15,
          data: item.data,
        };
      });
      // console.log(series);
      series = series.filter((item) => {
        return item.name !== "总户数";
      });
      const option = {
        grid: echartOption.echartGrid({
          top: 40,
          bottom: 12,
        }),
        dataZoom: echartOption.dataZoomRight([0, 1], {
          endValue: 8,
        }),
        legend: echartOption.echartLegend(legendData, 0),
        xAxis: {
          type: "value",
          position: "top",
          splitNumber: 3,
          splitLine: {
            show: false,
          },
          axisTick: echartOption.xAxisTick,
          axisLine: {
            show: false,
          },
          axisLabel: echartOption.xAxisLabel(),
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            splitLine: {
              show: false,
            },
            axisTick: echartOption.yAxisTick,
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                fontSize: 15,
                color: "#fff",
                fontFamily: "SourceHanSansCN-Regular",
              },
              formatter: (params) => {
                if (params.length > 5) {
                  params = params.slice(0, 4) + "...";
                }
                return params;
              },
            },
            data: yLabel,
          },
          // 右边显示数据
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            data: allData.data[allData.data.length - 1].data,
          },
        ],
        tooltip: echartOption.tooltip(),
        series: [...series],
      };

      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 614px;
  height: 638px;
}
</style>
